<template>
  <div>
      <Row class="header">
          <h4 style="float:left;">系统通知</h4>
          <div class="tags" style="float:right">
              <span class="more" @click="toBoardPage"> <span class="img"></span> 更多 </span>
          </div>
      </Row>
      <ul class="ulboard">
          <li v-for="item in boardData" :key="item.broadid">
              <div class="dot" style="float:left">
                  <i :style="{ background: item.lookStatus == 0 ? 'red' : 'var(--default-color-level2)' }"></i>
              </div>
              <div class="ivu-list-item-meta-description">
                  <a
                      v-html="item.content"
                      v-show="item.lookStatus == 0"
                      @click="showNotice(item)"
                      class="table-content"
                  ></a>
                  <span
                      style="cursor: pointer"
                      @click="showNotice(item)"
                      v-html="item.content"
                      v-show="item.lookStatus == 1"
                      class="table-content"
                  ></span>
                  <p style="color:#b8b8b8;margin-top:10px;">
                      <span>{{ item.sendTime }}</span>
                      <span
                          class="read unread"
                          style="float:right;margin-right:0px;"
                          title="标为已读"
                          v-if="item.lookStatus == 0"
                          @click="changeMsgRead(item)"
                      >
                       
                          <span class="img"></span> <span class="icon-redpot"></span>
                      </span>
                      <span
                          class="read"
                          style="float:right;margin-right:0px;cursor: not-allowed"
                          title="通知已读"
                          v-else
                      >
                            <span class="img"></span>
                        </span>
                    
                    
                  </p>
                  <div class="divider"></div>
              </div>
          </li>
      </ul>
      <div style="text-align:center;margin-bottom:20px;">
          <p v-if="boardData.length == 0" style="text-align:center">暂无数据</p>
      </div>
      <Modal
          v-model="modal"
          title="公告详情"
          footer-hide
          @on-cancel="cancelModal"
          :z-index="1068"
      >
          <div v-html="curNotice.content" style="font-size:14px;" class="noticeContent"></div>
      </Modal>
  </div>
</template>

<script>
import encryption from '@/libs/encryption.js';
import { mapActions, mapState } from 'vuex';
import { boardlist_new, changeMsgRead, setChatAllRead } from '@/api/boardcast_new';
import clear from '@/assets/boardcast/clear.png';
import clear_hover from '@/assets/boardcast/clear_hover.png';
import more from '@/assets/boardcast/more.png';
import more_hover from '@/assets/boardcast/more_hover.png';
import New from '@/assets/boardcast/New.png';
export default {
  name: 'boardcast_new',
  components: {},
  props: ['type'],
  data() {
      let October = sessionStorage.getItem('November');
      October = JSON.parse(encryption.SelfUseDecrypt(October));
      return {
          USER_ID: October.userId,
          USER_Name: October.nickname,
          modal: false,
          curNotice: '',
          clear,
          more,
          New,
          boardData: [],
          boardCount: 0,
          queryBoardInfo: {
              pageIndex: 1,
              pageSize: 10,
              lookStatus: '',
              receiver: October.userId
          }
      };
  },
  watch: {
      notReadCount(val, oldval) {
          this.getBoardLists();
      }
  },
  filters: {},
  computed: {
      ...mapState('board', ['notReadCount']) //未读消息数
  },
  mounted() {
      this.getBoardLists();
  },
  beforeDestroy() {},
  methods: {
      ...mapActions('board', ['getBoardListNotRead']),
      rowClassName(row, index) {
          if (index % 2 === 1) {
              return 'demo-table-info-row';
          }
          return '';
      },
      changeLookStatus(val) {
          this.queryBoardInfo.lookStatus = val;
          this.getBoardLists();
      },
      getBoardLists() {
          if (this.type == 1) {
              //      		this.queryBoardInfo.lookStatus = 0;
          }
          boardlist_new(this.queryBoardInfo).then((data) => {
              if (data.code == 1) {
                  this.boardData = data.data.items.map((item) => {
                      let content;
                      let hasError;
                      try {
                          content = JSON.parse(item.content);
                      } catch (e) {
                          hasError = true;
                      }
                      if (hasError) {
                          return item;
                      } else {
                          return Object.assign(item, {
                              content: content.content,
                              bid: content.id,
                              sceneName: content.sceneName,
                              title: content.title,
                              type: content.type
                          });
                      }
                  });
                  this.boardCount = data.data.total;
              }
          });
      },
      // changeStatus(status){
      // 	this.queryBoardInfo.pageIndex = 1;
      // 	this.queryBoardInfo.lookStatus = status;
      // 	this.getBoardLists();
      // },
      change(page) {
          this.queryBoardInfo.pageIndex = page;
          this.getBoardLists();
      },
      typeFilter(type) {
          let types = '';
          if (type == 1) {
              types = '事务公告';
          }
          // else if (type == 2) {
          // 	types = '普通公告'
          // }
          else if (type == 3) {
              types = '违规公告';
          }
          // else if (type == 4) {
          // 	types = '系统公告'
          // }
          return types;
      },
      changeMsgRead(item) {
          if (item.lookStatus == 1) {
              return;
          }
          changeMsgRead(item.id).then((data) => {
              if (data.code == 1) {
                  this.getBoardListNotRead();
                  this.getBoardLists();
              }
          });
      },
      expandNotice(event, status, item) {
          if (event.target.nodeName === 'A' && event.target.className === 'expand') {
              this.$set(item, 'status', status);
              if (status === true) {
                  this.changeMsgRead(item);
              }
          }
      },
      toBoardPage() {
          this.$emit('hidePop');
          this.$router.push({
              path: '/bulletinReceive'
          });
      },
      showNotice(item) {
          if (event.target.nodeName == 'A' && event.target.href) {
              return;
          }
          this.modal = true;
          this.curNotice = item;
          if (item.lookStatus === 0) {
              this.changeMsgRead(item);
          }
      },
      setChatAllRead() {
          setChatAllRead().then((data) => {
              if (data.code == 1) {
                  this.getBoardListNotRead();
                  this.getBoardLists();
              }
          });
      },
      //
      clickStatus(item) {
          console.log(item);
      },
      cancelModal(status) {
          this.modal = false;
          setTimeout(() => {
              this.$emit('showPop', true);
          });
      }
  },
  destroyed() {}
};
</script>
<style scoped>
.ulboard .divider {
  display: block;
  height: 1px;
  width: 100%;
  min-width: 100%;
  margin: 12px 0;
  clear: both;
  background: 0 0;
  border-top: 1px dashed #e8eaec;
}

.ulboard {
  max-height: 60vh;
  overflow-y: auto;
  /* padding: 24px 24px 0 24px; */
  margin-top:20px;
}
.ulboard li {
  white-space: normal;
  word-break: break-all;
}

.ulboard .dot i {
  display: inline-block;
  width: 4px;
  height: 4px;
  background: var(--default-color-levle2);
  border-radius: 50%;
  vertical-align: middle;
}

.ivu-list-item-meta-description {
  margin-left: 1em;
  color: var(--default-color);
}

#boardPoptip .header {
  height: 54px;
  line-height: 54px;
  border-bottom: 1px dashed #ebebed;
  padding: 0 24px;
  font-size: 14px;
}

.tags span {
  padding-left: 20px;
  cursor: pointer;
}

.tags span:hover {
  color: #2f70ff;
}

.tags img {
  vertical-align: middle;
  margin-right: 4px;
}

.tags span .img {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

.tags span.clear .img {
  background: url('../../assets/boardcast/clear.png') no-repeat;
}

.tags span.more .img {
  background: url('../../assets/boardcast/more.png') no-repeat;
}

.tags span.clear:hover .img {
  background: url('../../assets/boardcast/clear_hover.png') no-repeat;
}

.tags span.more:hover .img {
  background: url('../../assets/boardcast/more_hover.png') no-repeat;
}

.read {
  font-size: 12px;
  margin-right: 30px;
  cursor: pointer;
  color: #aeaeae;
}

.read:hover {
  color: #2f70ff;
}

.icon-redpot{
  width: 7px;
  height: 7px;
  border-radius: 16px;
  background: red;
  display: inline-block;
  position: absolute;
  left: 19px;
  top: 1px;
  opacity: .8;
}

.unread{
  position: relative;
  transform: scale(.75);
}
.unread:hover{
  transform: scale(.85) !important;
}
.unread .img {
  width: 25px !important;
  height: 20px !important;

  background: url('../../assets/boardcast/unread_hover.png') no-repeat !important;
}

.unread:hover .img {
  background: url('../../assets/boardcast/unread_hover.png') no-repeat !important;
}

.read .img {
  display: inline-block;
  margin-top: -2px;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  background: url('../../assets/boardcast/read.png') no-repeat;
}

.read:hover .img {
  background: url('../../assets/boardcast/read.png') no-repeat;
}

.ulboard .read .img {
  background-size: 14px 14px;
}

.ulboard .read:hover .img {
  background-size: 14px 14px;
}
a.table-content {
  color: #1563C2 ;
}
</style>
<style>
.table-content * {
  display: inline-block;
}

.table-content img {
  max-height: 22px;
  vertical-align: middle;
}
/*modal公告样式*/
.noticeContent {
  word-break: break-all;
}

.noticeContent img {
  max-width: 100%;
}

.noticeContent pre {
  white-space: normal;
}
</style>
